<template>
  <div class="slotSon">
    <h1>这里是子组件</h1>
    <!-- 1.默认插槽 -->
    <!-- <div class="item">
      <h3>{{ title }}</h3>
      <div class="slotBoxBorder">
        <slot></slot>
      </div>
    </div> -->
    <!-- 2.具名插槽 -->
    <!-- <div class="item">
      <h3>{{ title }}</h3>
      <slot name="s1"></slot>
      <slot name="s2"></slot>
    </div> -->
    <!-- 3.作用域插槽 -->
    <div class="category">
      <h2>今日游戏榜单</h2>
      <slot :games="games" a="哈哈"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { reactive } from "vue";
// 3.作用域插槽
let games = reactive([
  { id: "01", name: "英雄联盟" },
  { id: "02", name: "王者荣耀" },
  { id: "03", name: "红色警戒" },
  { id: "04", name: "斗罗大陆" },
]);
</script>
<style scoped>
.slotSon {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
.slotBoxBorder {
  border: 1px solid #000;
}
</style>